<script setup lang="ts">

const headers = [
    {title: 'Boat Type', align: 'start', key: 'name'},
    {title: 'Price', key: 'price', align: 'center'},
    {title: 'Author', key: 'author', align: 'center'},
    {title: 'Year', key: 'year', align: 'center'},
    {title: 'Pages', key: 'pages', align: 'center'},
    {title: 'Publisher', key: 'publisher', align: 'center'}
]

const books = [
    {
        name: "The Lord of the Rings",
        price: 20.1,
        author: "J.R.R. Tolkien",
        year: 1954,
        pages: 1178,
        publisher: "George Allen & Unwin"
    },
    {
        name: "The Hobbit",
        price: 12.5,
        author: "J.R.R. Tolkien",
        year: 1937,
        pages: 310,
        publisher: "George Allen & Unwin"
    },
    {
        name: "The Silmarillion",
        price: 15.0,
        author: "J.R.R. Tolkien",
        year: 1977,
        pages: 384,
        publisher: "George Allen & Unwin"
    },
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"},
    {name: "The Art of War", price: 8.0, author: "Sun Tzu", year: 300, pages: 400, publisher: "M"}
]

</script>

<template>
    <v-data-table-virtual
        :headers="headers"
        :items="books"
        height="400"
        item-value="name"
    ></v-data-table-virtual>
</template>

<style scoped lang="sass">

</style>
